<template>
  <div class="agent">
    <div class="top">
      <!--<affix :label="$t('qualityCheck.qualityCheckAgent')"></affix>-->
      <div class="templa" style="padding-bottom:10px;">
        <span class="temp">{{$t('qualityCheck.qualityTemplateClass')}}：</span>
        <el-radio-group v-model="webOrCallTemp" @change="tempStateChange">
          <el-radio :label="1">{{$t('qualityCheck.qualityTemplateClassCall')}}</el-radio>
          <el-radio :label="2">{{$t('qualityCheck.qualityTemplateClassWeb')}}</el-radio>
        </el-radio-group>
      </div>
      <div class="templa">
        <span class="temp">{{$t('qualityCheck.qualityTemplate')}}：</span>
        <el-select style="margin-left: 42px;" v-model.trim="value" @change="change" v-if="items.length!==0">
          <el-option
            v-for="(item, index) in items"
            v-show="webOrCallTemp === 2 ? item.QUALITY_TYPE === 'qualityWebchat' : item.QUALITY_TYPE !== 'qualityWebchat'"
            :key="index"
            :label="item.name"
            :value="index">
          </el-option>
        </el-select>
        <span v-else>{{$t('qualityCheck.pleaseExployModel')}}</span>
        <span class="ui-unfold-span">
          <span @click="isShowFold = false" v-show="isShowFold">{{$t('report.foldedContition')}} <i class="el-icon-arrow-up"></i></span>
          <span @click="isShowFold = true" v-show="!isShowFold">{{$t('report.unfoldedContition')}} <i class="el-icon-arrow-down"></i></span>
        </span>
      </div>
      <Unfold :title="unfoldTitle" :isShow="isShowFold" style="margin-bottom: 20px">
        <template slot="unfoldSlot">
          <!--通话查询条件-->
          <div v-show="webOrCallTemp === 1" style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="tem inner">
                  <span class="temp">{{$t('public.queues')}}：</span><br>
                  <el-select size="mini" v-model="callForm.ERROR_MEMO" multiple filterable :placeholder="$t('qualityCheck.skillGroupSearch')">
                    <el-option
                      v-for="(item, index) in callQueueList"
                      :key="index"
                      :label="item.DisplayName"
                      :value="item.Exten">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tem inner">
                  <span class="temp">{{$t('call.SQLabel')}}：</span><br>
                  <el-select size="mini" v-model.trim="callForm.SERVICE_QUALITY" multiple filterable :placeholder="'--'+$t('webchat.webchatAll')+'--'">
                    <el-option
                      v-for="(item, index) in newSqLabel"
                      :key="index"
                      :label="item.name"
                      :value="item._id">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tem inner">
                  <span class="temp">{{$t('public.callTime')}}：</span><br>
                  <el-date-picker size="mini"
                                  :id="['a1','a2']"
                                  v-model="callForm.callTime"
                                  :editable="boolean"
                                  type="datetimerange"
                                  :picker-options="pickerOptions2"
                                  :placeholder="$t('public.timeRanges')"
                                  align="right"
                                  @change="callTimeChange">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>

          <!--在线咨询-->
          <div v-show="webOrCallTemp === 2" style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="tem inner">
                  <span class="temp">{{$t('public.queues')}}：</span><br>
                  <el-select size="mini" v-model.trim="webchatForm.toPeer" multiple filterable :placeholder="$t('qualityCheck.skillGroupSearch')">
                    <el-option
                      v-for="(item, index) in queueList"
                      :key="index"
                      :label="item.DisplayName"
                      :value="item.Exten">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tem inner">
                  <span class="temp">{{$t('webchat.platformSource')}}：</span><br>
                  <el-select size="mini" v-model.trim="webchatForm.platform" :placeholder="$t('public.all')">
                    <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                    <el-option
                      v-for="(item, index) in platforms"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tem inner">
                  <span style="margin: 0px" class="temp">{{$t('qualityCheck.endTheSessionType')}}：</span><br>
                  <el-cascader
                    popper-class="webchat-finish"
                    style="width: 100%"
                    :options="closeOptions"
                    filterable
                    v-model.trim="activeFinish"
                    change-on-select
                  ></el-cascader>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tem inner">
                  <span class="temp">{{$t('webchat.msgNum')}}：</span><br>
                  <el-radio-group style="margin-left: -10px;" v-model.trim="webchatForm.msgCountType">
                    <el-radio size="mini" label="gt" >{{$t('webchat.moreThan')}}</el-radio>
                    <el-radio size="mini" label="lt" >{{$t('webchat.lessThan')}}</el-radio>
                    <el-radio size="mini" label="eq" >{{$t('webchat.equal')}}</el-radio>
                  </el-radio-group>
                  <el-input style="width: 60px; margin-left: 10px;" size="mini" v-model.trim="webchatForm.msgCount" :placeholder="$t('public.pleaseInput')"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-popover
                ref="popover4"
                placement="bottom"
                @show="popoverShow"
                v-model.trim="popoverVisable"
                width="240"
                trigger="click">
                <agent-tree :readSeat="folllowedAgents" :visable="popoverVisable" ref="agentTree" @saveFollowedAgents="saveFollowedAgents"></agent-tree>
              </el-popover>
              <span class="temp">{{$t('public.agent')}}：</span><br>
              <div class="follow-agent-wrap" v-popover:popover4>
                <span class="follow-agent follow-common" v-for="item in folllowedAgents" :key="item._id">{{item.label}}
                  <i class="el-icon-close" @click.stop="closeFollowedAgents(item._id)"></i>
                </span>
                <div style="float: right">
                  <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                </div>
              </div>
              <el-checkbox style="margin-left: 10px;" v-model.trim="form.includeSubordinate">{{$t('public.includeUnderAgent')}}</el-checkbox>
            </el-col>
            <el-col :span="6">
              <div class="tem inner" v-if="items.length!==0">
                <span class="temp">{{$t('qualityCheck.checkTime')}}：</span><br>
                <el-date-picker size="mini"
                                v-model.trim="form.time"
                                :id="['qualitycheckTimeAgent1','qualitycheckTimeAgent2']"
                                type="datetimerange"
                                :picker-options="pickerOptions2"
                                :placeholder="$t('public.timeRanges')"
                                align="right"
                                :editable="boolean"
                                @change="timeChange">
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
        </template>
      </Unfold>

      <div class="sub">
        <el-button class="primary_btn report_excel_btn" @click="rest">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click= "query">{{$t('public.search2')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click= "exportExcel">{{$t('report.exportXls')}}</el-button>
      </div>
      <affix :label="$t('public.searchResult')"></affix>
    </div>
    <div class="tables" v-show="!isHaveData" v-loading="agentLoading">
      <div class="deploy">
        <div class="search-pagination">
          <pagination
                  :small="pagination.small"
                  :currentPage="pagination.currentPage"
                  :count="count"
                  @turnPage="turnPage"
                  :totalPage="totalPage"
                  >
          </pagination>
        </div>
      </div>
      <el-table :data="webTableData" style="width: 100%" stripe v-show="template.QUALITY_TYPE==='qualityWebchat'" size="mini">
        <el-table-column prop="DISPOSAL_AGENT" :label="$t('public.agent')" width="">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in configList"
          :key="'web' + index"
          :prop="item.order"
          :label="item.name"
          width=""
          >
        </el-table-column>
        <el-table-column prop="AMOUNT" :label="$t('qualityCheck.averageScore')" width="">
        </el-table-column>
      </el-table>
      <el-table :data="callTableData" style="width: 100%" stripe v-show="template.QUALITY_TYPE!=='qualityWebchat' && template.type==='pass'" size="mini">
        <el-table-column prop="DISPOSAL_AGENT" :label="$t('public.agent')" width="">
        </el-table-column>
        <el-table-column prop="all_count" :label="$t('qualityCheck.agentMonitorNumber')" width="">
        </el-table-column>
        <el-table-column prop="all" :label="$t('qualityCheck.passTheNumber')" width="">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in configList"
          :key="item.name + index"
          :prop="item.name+'_cent'"
          :label="item.value"
          width=""
        >
        </el-table-column>
        <el-table-column prop="all_cent" :label="$t('qualityCheck.agentMonitorNumber')" width="">
        </el-table-column>
      </el-table>
      <el-table :data="callTableData" style="width: 100%" stripe v-show="template.QUALITY_TYPE!=='qualityWebchat' && template.type!=='pass'" size="mini">
        <el-table-column prop="DISPOSAL_AGENT" :label="$t('public.agent')" width="">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in configList"
          :key="'score' + index"
          :prop="item.order"
          :label="item.name"
          width=""
        >
        </el-table-column>
        <el-table-column prop="AMOUNT" :label="$t('qualityCheck.averageScore')" width="">
        </el-table-column>
      </el-table>
    </div>
    <div v-show="isHaveData" style="text-align: center;padding: 20px;">
      {{$t('public.noData')}}
    </div>
    <!--<div v-show="!isSearchState" style="text-align: center;padding: 20px;">-->
      <!--{{$t('public.pleaseSearch')}}-->
    <!--</div>-->
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import {getDateTime, deepClone, scopeAgents, utilExtend, updateAllOptions} from '@/utils/m7Utils.js'
  import {getQualityCheckConfigs} from '@/utils/webchat.js'
  import Affix from '../../ui-modules/affix/Affix.vue'
  import AgentTree from './base/qualityAgentTree.vue'
  import Unfold from '../../ui-modules/unfold/index.vue'
  export default {
    name: 'random',
    data () {
      return {
        webOrCallTemp: 1,
        form: {
          time: '',
          includeSubordinate: false,
          selectedAgent: []
        },
        callForm: {
          callTime: '',
          OFFERING_TIME_BEGIN: '',
          OFFERING_TIME_END: '',
          SERVICE_QUALITY: [], // 服务品质标签
          ERROR_MEMO: []
        },
        webchatForm: {
          toPeer: [],
          msgCount: '',
          msgCountType: '',
          finishKey: '',
          platform: '' // 平台来源
        },
        newSqLabel: [], // 服务品质标签
        activeFinish: [],
        finishReasonList: [], // 结束会话类型
        callQueueList: [], // 通话技能组
        queueList: [], // 在线咨询技能组
        platforms: [  // 平台来源
          {label: this.$t('webchat.websiteCon'), value: 'pc'},
          {label: this.$t('webchat.wapCon'), value: 'wap'},
          {label: this.$t('webchat.appCon'), value: 'sdk'},
          {label: this.$t('webchat.weChatCon'), value: 'weixin'},
          {label: this.$t('webchat.weChatMini'), value: 'wxmini'},
          {label: this.$t('webchat.weBoCon'), value: 'weibo'},
          {label: this.$t('webchat.enterpriseShot'), value: 'wxwork'},
          {label: this.$t('webchat.baiduBCP'), value: 'ocpc'},
          {label: this.$t('webchat.TikTok'), value: 'dy'},
          {label: this.$t('webchat.platformWXKF'), value: 'wxkf'}
        ],
        value: 0,
        num: 0,
        isHaveData: false,
        isSearchState: false,
        once: true,
        sessionOptions: [],
        closeOptions: [],
        boolean: false,
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        items: [],
        template: {},
        configList: [],
        pagination: {
          small: false,
          currentPage: 1
        },
        getWebchatCache: false,
        agentLoading: false,
        callTableData: [],
        webTableData: [],
        count: 0,
        totalPage: 1,
        agentList: [],
        unfoldTitle: [], // 展开收起标题
        isShowFold: true, // 展开收起标题
        popoverVisable: false  //  座席组件展开时  触发reset方法
      }
    },
    components: {
      Pagination,
      AgentTree,
      Affix,
      Unfold
    },
    methods: {
      rest () {
        for (let i in this.form) {
          if (typeof this.form[i] === 'object' && i !== 'claimTime' && i !== 'checkTime') {
            this.form[i] = []
          } else {
            this.form[i] = ''
          }
        }
        for (let i in this.callForm) {
          if (typeof this.callForm[i] === 'object') {
            this.callForm[i] = []
          } else {
            this.callForm[i] = ''
          }
        }
        for (let i in this.webchatForm) {
          if (typeof this.webchatForm[i] === 'object') {
            this.webchatForm[i] = []
          } else {
            this.webchatForm[i] = ''
          }
        }
        this.activeFinish = ''
      },
      timeChange (value) {
        if (!value) {
          this.form.time = ''
          this.form.BEGIN_TIME = ''
          this.form.END_TIME = ''
        }
      },
      callTimeChange (value) {
        if (!value) {
          this.callForm.callTime = ''
          this.callForm.OFFERING_TIME_BEGIN = ''
          this.callForm.OFFERING_TIME_END = ''
        }
      },
      change (index) {
        this.isSearchState = false
        this.agentLoading = true
        if (!this.items.length) {
          return
        }
        this.template = this.items[index]
        this.renderWebchatCache()
        if (this.items[index].QUALITY_TYPE === 'qualityWebchat') {
          // if (this.getWebchatCache === false) {
          // }
          this.queryWebchatGradeResult(1)
        } else {
          this.queryCallSheetGradeResult(1)
        }
      },
      renderWebchatCache () {
        let self = this
        this.getWebchatCache = true
        let configs = deepClone(this.template.config)
        this.configList = getQualityCheckConfigs(configs)
      },
      fetchData () {
        let self = this
        this.$store.dispatch('getCache', {type: 'qualityCheckTemplates'}).then((res) => {
          self.items = res
          this.tempStateChange()
//          self.template = res[this.num]
//          self.value = this.num
//          self.change(this.num)
          let configs = deepClone(this.template.config)
          self.configList = getQualityCheckConfigs(configs)
          self.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
            let agents = scopeAgents('qc', res)
            self.agentList = agents
          })
        })
        this.$store.dispatch('getCache', {type: 'queues'}).then((res) => {
          self.callQueueList = res
        })
        this.$store.dispatch('getCache', {type: 'mailQueues'}).then((res) => {
          self.queueList = res
        })
      },
      tempStateChange () {
        this.isHaveData = true
        if (this.items.length) {
          if (this.webOrCallTemp === 1) {
            this.items.some((item, index) => {
              if (item.QUALITY_TYPE !== 'qualityWebchat') {
                this.num = index
                this.isHaveData = false
                return item.QUALITY_TYPE !== 'qualityWebchat'
              }
            })
          } else {
            this.items.some((item, index) => {
              if (item.QUALITY_TYPE === 'qualityWebchat') {
                this.num = index
                this.isHaveData = false
                return item.QUALITY_TYPE === 'qualityWebchat'
              }
            })
          }
        }
        //   value 是 模板对应的 index
        this.value = this.num
        this.change(this.value)
        if (this.once) {
          this.once = false
        }
      },
      queryCallSheetGradeResult (page) {
        if (this.form.time && this.form.time[0] !== null) {
          this.form.BEGIN_TIME = getDateTime(this.form.time[0])
        }
        if (this.form.time && this.form.time[1] !== null) {
          this.form.END_TIME = getDateTime(this.form.time[1])
        }
        if (this.callForm.callTime && this.callForm.callTime[0] !== null) {
          this.callForm.OFFERING_TIME_BEGIN = getDateTime(this.callForm.callTime[0])
        }
        if (this.callForm.callTime && this.callForm.callTime[1] !== null) {
          this.callForm.OFFERING_TIME_END = getDateTime(this.callForm.callTime[1])
        }
        this.form.page = page
        this.form.pageSize = 10
        this.form.TEMPLATE = this.template._id
        let data = deepClone(this.form)
        utilExtend(data, deepClone(this.callForm))
        delete data.time
        let agent = ''
        if (data.selectedAgent.length) {
          data.selectedAgent.forEach((item) => {
            agent += ',' + item
          })
        }
        if (!data.SERVICE_QUALITY.length) {
          delete data.SERVICE_QUALITY
        }
        if (!data.ERROR_MEMO.length) {
          delete data.ERROR_MEMO
        }
        data.selectedAgent = agent
        this.$store.dispatch('queryCallSheetGradeResult', data).then((res) => {
          if (res.success) {
            let agents = this.$store.getters.agents || {}
            for (let i = 0; i < res.list.length; i++) {
              if (agents[res.list[i].DISPOSAL_AGENT]) {
                res.list[i].DISPOSAL_AGENT = agents[res.list[i].DISPOSAL_AGENT].displayName + '[' + agents[res.list[i].DISPOSAL_AGENT].exten + ']'
              } else {
                res.list[i].DISPOSAL_AGENT = ''
              }
            }
            this.callTableData = res.list
            this.count = res.count
            this.totalPage = Math.ceil(res.count / 10) || 0
            this.isSearchState = true
            this.agentLoading = false
          }
        })
      },
      queryWebchatGradeResult (page) {
        if (this.form.time && this.form.time[0] !== null) {
          this.form.BEGIN_TIME = getDateTime(this.form.time[0])
        }
        if (this.form.time && this.form.time[1] !== null) {
          this.form.END_TIME = getDateTime(this.form.time[1])
        }
        this.form.page = page
        this.form.pageSize = 10
        this.form.TEMPLATE = this.template._id
        let data = deepClone(this.form)
        let finishArr = this.activeFinish
        if (finishArr && finishArr.length > 0) {
          for (let i = 0; i < finishArr.length; i++) {
            finishArr[i] = finishArr[i].split('__')[0]
          }
        }
        this.webchatForm.finishKey = finishArr[finishArr.length - 1]
        utilExtend(data, deepClone(this.webchatForm))
        let agent = ''
        if (data.selectedAgent.length) {
          data.selectedAgent.forEach((item) => {
            agent += ',' + item
          })
        }
        if (data.msgCountType && !data.msgCount) {
          this.$message.error('请输入消息条数')
          return
        }
        if (!data.msgCountType && data.msgCount) {
          this.$message.error('请选择消息查询类型')
          return
        }

        if (!data.toPeer.length) {
          delete data.toPeer
        }
        data.selectedAgent = agent
        this.$store.dispatch('queryWebchatGradeResult', data).then((res) => {
          if (res.success) {
            let agents = this.$store.getters.agents || {}
            for (let i = 0; i < res.list.length; i++) {
              if (agents[res.list[i].user]) {
                res.list[i].DISPOSAL_AGENT = agents[res.list[i].user].displayName + '[' + agents[res.list[i].user].exten + ']'
              } else {
                res.list[i].DISPOSAL_AGENT = ''
              }
            }
            this.webTableData = res.list
            this.count = res.count
            this.totalPage = Math.ceil(res.count / 10) || 0
            this.isSearchState = true
            this.agentLoading = false
          }
        })
      },
      query () {
        this.pagination.currentPage = 1
        this.agentLoading = true
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryWebchatGradeResult(1)
        } else {
          this.queryCallSheetGradeResult(1)
        }
      },
      turnPage (pageNum) {
        this.pagination.currentPage = pageNum
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryWebchatGradeResult(pageNum)
        } else {
          this.queryCallSheetGradeResult(pageNum)
        }
      },
      exportExcel () {
        if (this.template.type === 'pass') {
          this.$message.error(this.$t('qualityCheck.passTemNoexcelFun'))
          return
        }
        let data = {}
//        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
//          data.Method = 'exportWebchatGradeResult'
//        } else {
//          data.Method = 'exportCallSheetGradeResult'
//        }
        if (this.form.time && this.form.time[0] !== null) {
          this.form.BEGIN_TIME = getDateTime(this.form.time[0])
        }
        if (this.form.time && this.form.time[1] !== null) {
          this.form.END_TIME = getDateTime(this.form.time[1])
        }
        let query = deepClone(this.form)
        let agent = ''
        if (query.selectedAgent.length) {
          query.selectedAgent.forEach((item) => {
            agent += ',' + item
          })
        }

        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          data.Method = 'exportWebchatGradeResult'
          utilExtend(query, deepClone(this.webchatForm))
          if (!query.toPeer.length) {
            delete query.toPeer
          }
        } else {
          data.Method = 'exportCallSheetGradeResult'
          utilExtend(query, deepClone(this.callForm))
          if (!query.SERVICE_QUALITY.length) {
            delete query.SERVICE_QUALITY
          }
          if (!query.ERROR_MEMO.length) {
            delete query.ERROR_MEMO
          }
        }
        query.selectedAgent = agent
        query.TEMPLATE = this.template._id
        data.Query = query
        this.$store.dispatch('exportQualityCheckExcel', data).then((res) => {
        })
      },
      saveFollowedAgents (agents) {
        this.form.selectedAgent = deepClone(agents)
        document.getElementsByTagName('body')[0].click()
      },
      closeFollowedAgents (agent) {
        this.form.selectedAgent = this.form.selectedAgent.filter((item) => item !== agent)
      },
      popoverShow () {
        this.$refs.agentTree.setCheckedKeys()
        this.$refs.agentTree.reset()
      }
    },
    beforeMount () {
      this.fetchData()
      this.$store.dispatch('getCache', {type: 'sqLabels'}).then(() => {
        this.newSqLabel = this.$getCache('sqLabels')
      })
      this.$store.dispatch('getCache', {type: 'channelDic'}).then((dics) => {
        let _dics = []
        for (var i = 0; i < dics.length; i++) {
          let obj = dics[i]
          if (obj.type === 'webchat') {
            _dics = obj.options || []
            break
          }
        }
        let finishKeys = []
        updateAllOptions(_dics, {Arr: this.sessionOptions})
        this.closeOptions = [
          {label: this.$t('webchat.webchatAll'), value: ''}, ...this.sessionOptions,
          {label: this.$t('webchat.addBlack'), value: 'add_black'}
        ]
      })
    },
    computed: {
      folllowedAgents () {
        let agents = this.form.selectedAgent || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item, label: agentsAll[item].displayName}
        })
      }
//      tableData () {
//        return this.$store.state.qualityCheck.queryGradeResult.list
//      },
//      count () {
//        return this.$store.state.qualityCheck.queryGradeResult.count
//      },
//      totalPage () {
//        return Math.ceil(this.$store.state.qualityCheck.queryGradeResult.count / 10) || 0
//      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .search-pagination
    float right
  .agent
    height calc(100vh - 90px)
    padding 20px 20px 0
    overflow scroll
    .el-row
      padding-bottom 20px
      .el-select, .el-date-editor, .el-input
        width 100%
        height 100%
    .tables
      padding-bottom 20px
      .deploy
        height 48px
        border 1px solid #e7e7eb
        border-bottom none
        padding-left 14px
        .page
          margin-top 10px
    /*.tem*/
      /*padding-bottom 20px*/
      /*margin-left 20px*/
      /*.el-checkbox*/
        /*color $cf-level3*/
        /*margin 0 10px 0 32px*/
        /*padding 0*/
      /*.temp*/
        /*display inline-block*/
        /*color $cf-gray1*/
        /*margin-bottom 5px*/
    /*.inner*/
      /*display inline-block*/
    .templa
      /*padding-bottom 20px*/
    .temp
      display inline-block
      margin-left 0
      margin-bottom 4px
      color $cf-gray1
    .el-radio-group
      margin-top 4px
      .el-radio
        margin 0 0 6px 20px
    .sub
      text-align right
      .search
        margin-left 24px
    .ui-affix
      /*padding-bottom 0*/
      margin-top 20px
  .follow-label
    line-height 24px
    font-size 12px
  .follow-agent-wrap
    float left
    width 386px
    cursor pointer
    border-radius: 5px
    border: 1px solid #dcdfe6
    padding: 6px 9px 6px 5px
    margin-bottom: 10px
    overflow: hidden
  .follow-common
    float left
    position relative
    line-height 24px
    background-color #7ab8f3
    margin 0 0 10px 10px
    padding 0 10px
    color #fff
    border-radius 4px
  .follow-agent-add
    cursor pointer
  .el-icon-close
    font-size 12px
  .follow-agent
    &:hover
      .el-icon-close
        display block
    .el-icon-close
      display none
      position absolute
      right -10px
      top -10px
      width 24px
      height 24px
      font-size 12px
      line-height 24px
      transform scale(0.6)
      text-align center
      color #fff
      background-color #0f99fc
      border-radius 50%
      border 1px solid #cce6ff
      cursor pointer
  .follow-agent-wrap-btn
    cursor pointer
    color $c-main
  .ui-unfold-span
    cursor pointer
    color $c-main
    margin-left 20px
</style>
